<!--资产列表 -->
<template>
    <div class="page assetsList-page" data-page="assetsListForSingle" style="z-index: 2;">
        <div class="link-page-nav">
            <a href="#" class="link" @click="$root.backToTab()">
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-search" style="overflow: hidden;">
            <span class="tt">消防资产</span>
            <a class="link ">
                <i class="iconfont  icon-xiaofanggongcheng" id="xfsystem" style="font-size:32px"></i>
                <i class="iconfont icon-jianzhu" id="jzwsystem" style="font-size:32px;display: none;"></i>
            </a>
        </div>
        <div class="page-content pdbottom120">
            <ul id="assets-info-list" style="height:100%"></ul>
        </div>
        <div class="more-task-btn" @click="scanning">
            <i class="iconfont icon-weibiaoti--2"></i>
        </div>
       
    </div>
</template>
<script>
    return {
        mounted() {
            var self = this;
            var app = self.$app;
            //页面传参
            self.currentOrgId = this.$route.params.orgId;
            self.fbsId = this.$route.params.fbsId;
            self.fbsName = this.$route.params.fbsName;
            if (self.fbsName != 0 && self.fbsName) {
                // jQuery("#trouble_bulid")[0].innerText = self.fbsName
                jQuery("#assets_build").addClass("select-active");
            }
        },
        data: function () {
            return {
                pageName: "assetsListForSingle",
                selectContent: '',
                chargeBuildId: 0,//建筑物id
                buildName: "",
                getNewId: (new Date()).getTime(),
            }
        },
        methods: {
            //原生扫一扫

            scanning: function () {
                native.scanQrCode();
            },
            //获取消防资产
            getXfzc:function(){
                var self = this;
                $("#assets-info-list").empty()
                Dao.getAssetsInfoForApp({
                        orgId: self.currentOrgId,
                        categoryId: -1,
                        systemId: -1,
                        isUse: -1,
                        name: '',
                        fbsId: 0
                    }, function (data) {
                        if (data && data.length > 0) {
                            for (var i = 0; i < data.length; i++) {
                                $("#assets-info-list").append(`
	                        <li class="assets-info-tital" id="categoryId_`+ data[i].systemId + `">
		                        <div class="assets-type-name">`+ data[i].systemName + `</div>
		                        <div class="assets-line">
		                        	<div class="assets-item assets-need-maintain" style="width:28%">
		                        		<p class="assets-item-title">资产类别</p>
		                        		<p class="assets-item-num">`+ data[i].type + `<span span class="assets-item-unit">种</span</p>
		                    		</div>
		                    		<div class="assets-item assets-need-maintain" style="width:28%">
		                        		<p class="assets-item-title">资产总数</p>
		                        		<p class="assets-item-num assets-item-color">`+ data[i].total + `<span span class="assets-item-unit">个</span</p>
		                			</div>
		                    		<div class="assets-item assets-need-maintain" style="width:28%">
		                        		<p class="assets-item-title">过期资产数</p>
		                        		<p class="assets-item-num">`+ data[i].expireCount + `<span class="assets-item-unit">个</span</p>
                                    </div>
                                    <div style="position:absolute;right:20px;top:20px" class="`+ (data[i].isHaveChild == 1 ? 'showDom' : 'hideDom') + `"><i class="iconfont icon-youjiantou" style="font-size:32px"></i></div>
		                        </div>
	                        </li>
                            `);
                                //资产列表
                                jQuery("#categoryId_" + data[i].systemId).off("click").on("click", { 'data': data[i] }, function (e) {
                                    var data = e.data.data;
                                    app.router.navigate("/assetsList/" + self.currentOrgId + '/' + data.systemName + '/' + data.type + '/' + data.total + '/' + data.expireCount + '/' + data.systemId + '/' + self.fbsId + '/' + self.fbsName + '/');
                                });
                              
                            }
                        } else {//没有数据
                            $("#assets-info-list").empty().append(`<div class="no-data-img"><img src="` + listNoDataPic() + `"/></div>`);
                        }
                    })
            }
            ,
            //获取建筑物列表数据
            getAssetsInfo: function (fbsId) {
                var self = this;
                var $ = self.$;
                $("#assets-info-list").empty();
                if (fbsId == 0) {
                    self.fbsId = 0
                }
                //增加类别选项
                Dao.getAssetsCountByFbs({
                    orgId: self.currentOrgId,
                    // categoryId:-1,
                    type: 0,
                    fbsId: -1
                }, function (data) {
                    if (data && data.length > 0) {
                        for (var i = 0; i < data.length; i++) {
                            $("#assets-info-list").append(`
	                        <li class="assets-info-tital" id="categoryId_`+ data[i].fbsId + `" >
		                        <div class="assets-type-name">`+ data[i].fbsName + `</div>
		                        <div class="assets-line">
		                        	<div class="assets-item assets-need-maintain" style="width:28%">
		                        		<p class="assets-item-title">资产类别</p>
		                        		<p class="assets-item-num">`+ data[i].type + `<span span class="assets-item-unit">种</span</p>
		                    		</div>
		                    		<div class="assets-item assets-need-maintain" style="width:28%">
		                        		<p class="assets-item-title">资产总数</p>
		                        		<p class="assets-item-num assets-item-color">`+ data[i].total + `<span span class="assets-item-unit">个</span</p>
		                			</div>
		                    		<div class="assets-item assets-need-maintain" style="width:28%">
		                        		<p class="assets-item-title">过期资产数</p>
		                        		<p class="assets-item-num">`+ data[i].expireCount + `<span class="assets-item-unit">个</span</p>
                                    </div>
                                    <div data-id=${data[i].fbsId} data-type=${data[i].type} style="position:absolute;right:20px;top:20px" class="` + (data[i].isHaveChild == 1 ? 'showDom' : 'hideDom') + `"><i class="iconfont icon-youjiantou" style="font-size:32px"></i></div>
		                        </div>
	                        </li>
                            `);
                            //资产列表
                            jQuery("#categoryId_" + data[i].fbsId).off("click").on("click", { 'data': data[i] }, function (e) {
                                let itemData = e.data.data
                                app.router.navigate("/assetsList/"+self.currentOrgId+'/'+itemData.fbsName+'/'+itemData.type+'/'+itemData.total+'/'+itemData.expireCount+'/-1/'+itemData.fbsId+'/'+self.fbsName+'/');
                            });

                        }
                    } else {//没有数据
                        $("#assets-info-list").empty().append(`<div class="no-data-img"><img src="` + listNoDataPic() + `"/></div>`);
                    }
                    // // 资产子级
                    jQuery(".showDom").off().on("click", function (e) {
                        let id = jQuery(this).attr('data-id')
                        let type = jQuery(this).attr('data-type')
                        app.router.navigate("/assetsNextChild/"+self.currentOrgId+'/'+id+'/'+type+'/');
                        e.stopPropagation();
                    });
                });
            },
            backToTab: function () {
                app.methods.backToTab();
            },
           
        },
        on: {
            pageInit: function (e, page) {
                var self = this;
                var $ = self.$;
                $("#trouble_bulid").click(function () {
                    self.select_build();
                })
                jQuery('#xfsystem').off().click(function () {
                    jQuery('#jzwsystem').show()
                    jQuery('#xfsystem').hide()
                   
                   self.getXfzc()
                })
                jQuery('#jzwsystem').off().click(function () {
                    jQuery('#xfsystem').show()
                    jQuery('#jzwsystem').hide()
                    self.getAssetsInfo()
                })
            },
            pageBeforeIn: function (e, page) {
                jQuery('#xfsystem').show()
                    jQuery('#jzwsystem').hide()
                    if(IfJzwFlag){
                        jQuery('#xfsystem').show()
                    jQuery('#jzwsystem').hide()
                        this.getAssetsInfo(self.fbsId);
                    }else{
                        this.getXfzc();
                        jQuery('#jzwsystem').show()
                    jQuery('#xfsystem').hide()
                    }
          
                if (self.fbsId != 0) {
                    $("#trouble_bulid").html(self.fbsName);
                    //$("#trouble_bulid").addClass('select-active');
                }
            },
            pageAfterIn: function (e, page) {
                var self = this;
                var $ = self.$;
            },
            pageBeforeRemove: function (e, page) {

            }
        }
    }
</script>
<style scoped>
    .unitStat-list-dslist ul:before {
        height: 0 !important;
    }

    .select-option {
        padding: 10px 5px;
        font-size: 12px;
        z-index: 3;
        position: fixed;
        width: 100%;
        margin-top: 48px;
    }

    .moreDectorState-page .unitStat-list-dslist {
        padding-top: 25px;
    }

    .global-search {
        background: #fff;
        height: 48px;
        color: #666666 !important;
        font-size: 12px;
        text-align: center;
        line-height: 48px;
    }

    .global-search i {
        font-size: 15px;
        line-height: 48px;
        overflow: hidden;
    }

    .item-title span {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        font-size: 12px;
    }

    .decter-name {
        font-size: 16px !important;
    }

    .item-inner div {
        line-height: 25px;
    }

    .assets-status span {
        color: #2471CA;
        padding-right: 10px;
    }

    .hideDom {
        display: none;
    }
</style>